<template>
  <div class="btn-box">
    <el-button class="my-button" type="primary" size="small" v-if="!isDisable" @click="changeState">{{myContent}}</el-button>
    <el-button class="my-button" type="primary" size="small" v-if="isDisable" :disabled="isDisable" :loading="true">{{myContent}}</el-button>
  </div>
</template>

<script>
  export default {
    name: "myButton",
    props:['content','dealFunction'],
    data(){
      return{
        isDisable:false,
        myContent:'保存'
      }
    },
    methods:{
      changeState(){
        axios.interceptors.request.use((config) => {//添加拦截器,监听ajax请求状态
          this.myContent = '加载中';
          this.isDisable = true;
          return config;
        }, (error) =>  {
          this.myContent = '保存';
          this.isDisable = false;
          return Promise.reject(error);
        });
        axios.interceptors.response.use((response) =>  {
          this.myContent = '保存';
          this.isDisable = false;
          if(response.data.code != 1) {
            return false;
          }
          return response;
        }, (error) => {
          this.myContent = '保存';
          this.isDisable = false;
          return Promise.reject(error);
        });
        var myInterceptor = axios.interceptors.request.use(function () {});
        axios.interceptors.request.eject(myInterceptor);//使用之后移除拦截器
        if(this.dealFunction && typeof this.dealFunction === 'function'){
          this.dealFunction();//接受父组件传递过来的处理函数并执行
        }else{
          return false
        }
      }
    }
  }
</script>

<style scoped>
  .btn-box {
    float: left;
  }
  .my-button{
    margin: 0 8px 0 0;
  }
</style>
